<template>
  <div class="shortcut-recorder">
    <div 
      class="recorder-input"
      :class="{ recording: isRecording, error: hasError }"
      tabindex="0"
      @click="startRecording"
      @keydown.prevent="handleKeyDown"
      @blur="stopRecording"
    >
      <span v-if="!isRecording && !currentShortcut" class="placeholder">
        点击录制快捷键...
      </span>
      <span v-else-if="isRecording" class="recording-text">
        请按下快捷键组合...
      </span>
      <span v-else class="shortcut-display">
        {{ currentShortcut }}
      </span>
    </div>
    <button 
      v-if="currentShortcut" 
      class="clear-btn"
      @click="clearShortcut"
      title="清除"
    >
      ✕
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  modelValue: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const isRecording = ref(false)
const hasError = ref(false)
const currentShortcut = ref(props.modelValue)

// 开始录制
const startRecording = () => {
  isRecording.value = true
  hasError.value = false
  currentShortcut.value = ''
}

// 停止录制
const stopRecording = () => {
  isRecording.value = false
}

// 清除快捷键
const clearShortcut = () => {
  currentShortcut.value = ''
  emit('update:modelValue', '')
}

// 处理按键
const handleKeyDown = (e: KeyboardEvent) => {
  if (!isRecording.value) {
    startRecording()
    return
  }

  e.preventDefault()
  e.stopPropagation()

  const parts: string[] = []

  // 修饰键
  if (e.ctrlKey) parts.push('Ctrl')
  if (e.altKey) parts.push('Alt')
  if (e.shiftKey) parts.push('Shift')
  if (e.metaKey) parts.push('Command')

  // 主键
  let mainKey = ''
  
  // 功能键
  if (e.key.startsWith('F') && e.key.length <= 3) {
    mainKey = e.key
  }
  // 字母和数字
  else if (e.key.length === 1 && /[a-zA-Z0-9]/.test(e.key)) {
    mainKey = e.key.toUpperCase()
  }
  // 特殊键
  else if (['Space', 'Enter', 'Escape', 'Tab', 'Backspace', 'Delete'].includes(e.key)) {
    mainKey = e.key
  }

  // 组合快捷键
  if (parts.length > 0 && mainKey) {
    parts.push(mainKey)
    const shortcut = parts.join('+')
    currentShortcut.value = shortcut
    emit('update:modelValue', shortcut)
    isRecording.value = false
  } else if (mainKey && ['F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'].includes(mainKey)) {
    // 功能键可以单独使用
    currentShortcut.value = mainKey
    emit('update:modelValue', mainKey)
    isRecording.value = false
  } else {
    hasError.value = true
    setTimeout(() => {
      hasError.value = false
    }, 500)
  }
}
</script>

<style scoped>
.shortcut-recorder {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recorder-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  font-size: 14px;
  text-align: center;
}

.recorder-input:hover {
  border-color: #667eea;
}

.recorder-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.recorder-input.recording {
  border-color: #4caf50;
  background-color: #f1f8f4;
  animation: pulse 1.5s ease-in-out infinite;
}

.recorder-input.error {
  border-color: #f44336;
  animation: shake 0.3s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.placeholder {
  color: #999;
  font-style: italic;
}

.recording-text {
  color: #4caf50;
  font-weight: 600;
}

.shortcut-display {
  font-family: monospace;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.clear-btn {
  padding: 8px 12px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.clear-btn:hover {
  background-color: #d32f2f;
  transform: scale(1.1);
}
</style>

